<template>
  <div class="room-details">
    <BreadCrumb title="房间详情"></BreadCrumb>
    <!-- 房间详情 -->
    <div class="room-details-content">
      <el-card class="room-details-card" :body-style="{ display: 'flex' }">
        <el-descriptions
          class="margin-top"
          title="房间信息"
          :column="1"
          border
          size="small"
        >
          <el-descriptions-item
            label="房间类型"
            :labelStyle="{ width: '100px' }"
          >
            {{ roomDetailsList.roomType }}
          </el-descriptions-item>
          <el-descriptions-item label="类型说明">
            {{ roomDetailsList.typeExplain }}
          </el-descriptions-item>
          <el-descriptions-item label="房间描述">
            {{ roomDetailsList.description }}
          </el-descriptions-item>
          <el-descriptions-item label="房间价格">
            {{ roomDetailsList.price }}
          </el-descriptions-item>
          <el-descriptions-item label="房间数量">
            <el-tag size="small">{{ roomDetailsList.stock }}</el-tag>
<!-- =======
            {{ roomDetails.roomType }}
          </el-descriptions-item>
          <el-descriptions-item label="类型说明">
            {{ roomDetails.typeExplain }}
          </el-descriptions-item>
          <el-descriptions-item label="房间描述">
            {{ roomDetails.description }}
          </el-descriptions-item>
          <el-descriptions-item label="房间价格">
            {{ roomDetails.price }}
          </el-descriptions-item>
          <el-descriptions-item label="房间数量">
            <el-tag size="small">{{ roomDetails.stock }}</el-tag>
>>>>>>> qnr -->
          </el-descriptions-item>
          <el-descriptions-item label="预定状态">
            <el-button
              type="primary"
              size="small"
              v-if="roomDetailsList.stock !== 0"
              @click="goReserve"
              >预定</el-button
            >
            <el-button type="danger" size="small" v-else disabled
              >不可预定</el-button
            >
          </el-descriptions-item>
        </el-descriptions>
        <img :src="roomDetailsList.roomUrl" alt="" />
      </el-card>
    </div>
    <!-- 评论功能 -->
    <div class="room-comments">
      <h3 style="margin: 25px 20px">房间评论
        <el-button type="primary" @click="add"
          style="float: right;">发布评论</el-button>
      </h3>
      <template v-if="comments.length">
        <comment-item
        v-for="comment in comments"
        :key="comment.commentId"
        :comment="comment"
      />
      </template>
      <template v-else>
        <el-empty description="评论为空"></el-empty>
      </template>
    </div>
    <!-- 预定弹出框 -->
    <el-dialog
      title="订房信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form size="mini" :model="orderForm" :rules="orderRules" ref="orderForm" label-width="80px">
        <el-form-item label="空闲房间" prop="roomId">
          <el-select v-model="orderForm.roomId">
            <el-option v-for="item in leisureRoomList" :value="item.roomId" :label="item.roomNumber" :key="item.roomId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="住房时间" prop="checkInTime">
            <el-date-picker
              v-model="orderForm.checkInTime"
              type="datetime"
              placeholder="选择日期时间"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelReserve">取消预定</el-button>
        <el-button type="primary" @click="ensureReserve">确定预定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import BreadCrumb from '@/components/user/BreadCrumb.vue'
import CommentItem from '@/components/Comment/CommentItem.vue'
import { getCommentsList, createComments } from '@/api/comments'
import { getRoomTypeDetail, getLeisureRoom } from '@/api/room'
import { submitOrder } from '@/api/order'
export default {
  name: 'RoomDetails',
  components: {
    BreadCrumb,
    CommentItem
  },
  data () {
    return {
      number: 1,
      dialogVisible: false,
      roomDetailsList: [], // 获取房间类型详情列表
      leisureRoomList: [], // 查询空闲房间列表
      comments: [],
      orderForm: {
        roomId: '',
        checkInTime: '',
        vipTypeId: ''
      },
      roomId: '',
      roomNumber: '',
      checkInTime: '',
      vipTypeId: 0,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      }
    }
  },
  created () {
    this.roomId = this.$route.query.roomId
    this.roomNumber = this.$route.query.roomNumber
    this.getComments()
    this.getRoomTypeDetail()
    this.orderForm.vipTypeId = this.userInfo.vipTypeId
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  methods: {
    // 获取房间评论
    async getComments () {
      this.comments = await getCommentsList(this.roomNumber)
      this.comments = this.comments.reverse()
    },
    // 获取类型空闲房间
    async getLeisureRoom () {
      const res = await getLeisureRoom(this.roomDetailsList.roomTypeId)
      this.leisureRoomList = res
    },
    // 获取房间类型详情
    async getRoomTypeDetail () {
      const res = await getRoomTypeDetail(this.$route.query.roomTypeId)
      this.roomDetailsList = res
      this.roomId = this.roomDetailsList.roomId
    },
    // 预定房间
    ensureReserve () {
      if (!this.orderForm.roomId) {
        this.$message({
          type: 'warning',
          message: '请选择房间号'
        })
        return false
      } else if (!this.orderForm.checkInTime) {
        this.$message({
          type: 'warning',
          message: '请选择预定时间'
        })
        return false
      } else {
        this.submitOrder()
        this.dialogVisible = false
      }
    },
    // 关闭弹出框
    handleClose () {
      this.orderForm.checkInTime = ''
      this.orderForm.roomId = ''
      this.dialogVisible = false
    },
    // 去预定
    goReserve () {
      this.dialogVisible = true
      this.getLeisureRoom()
    },
    // 提交预定订单
    async submitOrder () {
      await submitOrder(this.orderForm)
      this.$message({
        type: 'success',
        message: '预定成功,去支付'
      })
      this.getRoomTypeDetail()
    },
    // 取消预定
    cancelReserve () {
      this.dialogVisible = false
      this.$message({
        type: 'success',
        message: '取消成功'
      })
      this.$nextTick(() => {
        this.orderForm.checkInTime = ''
        this.orderForm.roomId = ''
      })
    },
    // 添加评论
    add () {
      this.$prompt('请输入评论内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        createComments(this.$route.query.roomId, value).then(async () => {
          await this.getComments()
          this.$notify({
            title: '成功',
            message: '评论成功',
            type: 'success'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.room-details {
  display: flex;
  flex-direction: column;
  .room-details-content {
    display: flex;
    justify-content: center;
  }
  .el-card {
    height: 100%;
    width: 94%;
    .el-descriptions {
      height: 100%;
      width: 50%;
      flex: 2;
    }
    img {
      flex: 1;
      height: 330px;
    }
  }
  .room-comments {
    margin: 0 auto;
    width: 94%;
    // height: 500px;
  }
}
</style>
